<template>
  <view>
    <view class="upload_img_ul">
      <view
        class="upload_img_li"
        v-for="(img, imgIndex) in imageList"
        :key="imgIndex"
      >
        <image
          class="img_box"
          mode="scaleToFill"
          :src="img.tempFilePath || img.url"
          alt="img"
        />
        <view
          class="close_icon_box"
          hover-class="hover"
          @click.stop="closeFn(imgIndex)"
        >
          <image
            class="add_icon_image"
            src="https://image.qqpyyds.com/mpAppImg/icon/error2_icon.png"
            alt="close_icon"
          />
        </view>
      </view>
      <view
        class="upload_img_li upload_img_li_btn"
        @click.stop="uploadImgFn"
        v-if="limit === 0 || imageList.length < limit"
      >
        <image
          class="icon_image"
          src="https://image.qqpyyds.com/mpAppImg/icon/tianjia2_icon.png"
          alt="add_icon"
        />
      </view>
    </view>
  </view>
</template>
<script>
import { upload } from '@/components/ossutil/ossMult'
export default {
  props: {
    imageList: {type: Array, default: []}, // 原始图片显示数组
    limit: {type: Number, default: 0}, // 限制选择数量 默认不限制
  },
  data () {
    return {
      
    }
  },
  methods:{
    // 删除图片
    closeFn (index) {
      this.$emit('remove',index)
    },
    // 上传图片
    async uploadImgFn(){
      const that = this
      let params = {
        type: 'image',
        checkSize: false,
        transmittedLength: that.imageList.length
      }
      if(that.limit){
        params.maxLength = that.limit
        params.number = that.limit
      }
      that.$emit('loading', true)
      try {
        const res = await upload(params, that)
        if (res.status == 'success') {
          that.$emit('upSuccess',res.data)
        } else {
          return wx.showToast({
            icon: 'none',
            mask: true,
            title: res.msg || '上传失败，请重试！'
          })
        }
        that.$emit('loading', false)
      } catch (error) {
        that.$emit('loading', false)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.upload_img_ul {
  margin-top: 24rpx;
  display: flex;
  flex-wrap: wrap;
  .upload_img_li {
    width: 216rpx;
    height: 216rpx;
    opacity: 1;
    background: #f9f9f9;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
    position: relative;
    .img_box {
      display: block;
      width: 100%;
      height: 100%;
    }
    .close_icon_box {
      position: absolute;
      right: 0px;
      top: 0px;
      padding: 4px;
      .add_icon_image {
        width: 28rpx;
        height: 28rpx;
        display: block;
      }
    }
    &.upload_img_li_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon_image {
        width: 64rpx;
        height: 64rpx;
      }
    }
    &:nth-child(3n) {
      margin-right: 0rpx;
    }
  }
}
</style>